<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="container"></div>
<script>
  const total = 100000;
  const timer = Date.now();

  for (let i = 0; i < total; i++) {
    const li = document.createElement('li');
    li.innerHTML = i;
    container.appendChild(li);
  }

  console.log(Date.now() - timer); //算的不是渲染时间 而是js执行的时间
  // 你会发现tab一直在转, 但是打印已经打印出来了, 说明上面打印的的确是js执行的时间
  // 另外你还会发现 这100000个li不是一个个扔到页面上的, 它是把它们先存起来最后一起扔到页面上的
  // 这是新版本浏览器的优化(对for), 这样不用每次都重绘

  //宏任务一定在渲染完之后才执行
  setTimeout(() => {
    console.log(Date.now() - timer);//这样打印的才是渲染时间 (js执行时间+渲染时间

    //你会发现渲染时间很长 根据机器不同配置 大概2-7s
  }, 0);


</script>
</body>
</html>
